<template>
  <div>
    <!-- 顶部区域内容展示------ -->
    <div class="header">
      <div class="hot_img"></div>
      <div class="hottime">更新日期：07月10日</div>
    </div>
    <!-- 内容列表区域 -------------->
    <List :musicList="list" title='hot'/>

  </div>
</template>

<script>
import axios from "../../api";
import List from '../home/List.vue'
export default {
  components:{
    List
  },
  data(){
    return {
      list:[]
    }
  },
  created() {
    this.getHotMusic();
  },
  methods: {
    async getHotMusic() {
      let res = await axios.getHotMusic();
      console.log("热歌榜----", res.data);
      this.list = res.data.playlist.tracks;
    }
  }
};
</script>

<style scoped lang='less'>
.header {
  position: relative;
  height: 2.9rem;
  background: url("../../assets/images/hot_music_bg_2x.jpg") no-repeat;
  background-size: contain;
  overflow: hidden;
  padding-left: 0.4rem;
  .hot_img {
    margin-top: 0.4rem;
    width: 2.84rem;
    height: 1.34rem;
    background-image: url("../../assets/images/index_icon_2x.png");
    background-position: -0.48rem -0.6rem;
    background-size: 3.32rem 1.94rem;
  }
  .hottime {
    margin-top: 10px;
    color: hsla(0, 0%, 100%, 0.8);
    font-size: 12px;
    -webkit-transform: scale(0.91);
    -ms-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
  }
}
</style>